import { Flex,} from 'antd'
import {AuthorizedResources, Res} from "@/app/lib/resource";
import React, {useContext} from "react";
import Link from "next/link";
import {usePathname} from "next/navigation";
import {ResourceContext} from "@/app/lib/ResourceContext";

const navigateBarStyle: React.CSSProperties = {
  width:'100%',
  height:'100%'
};

const navDivStyle:React.CSSProperties = {
  marginLeft:'2%',
  height:'100%',
  display:'flex',
  width:120,
  justifyContent:'center',
  alignItems:'center',
};

const navLinkStyle:React.CSSProperties = {
  color:'black',
  fontSize:14,
  width:'50%',
  height:'80%',
  textAlign:'center',
  justifyContent:"center",
  alignItems:'center',
  display:'flex',
}

const selectedNavLinkStyle:React.CSSProperties = {
  color:'black',
  fontSize:14,
  width:'80%',
  height:'60%',
  textAlign:'center',
  justifyContent:"center",
  alignItems:'center',
  display:'flex',
  borderBottom:'2px solid',
  borderColor:'red'
}
function loadNavs(resources:AuthorizedResources):Res[]{
  let allResources = resources.navs;
  if(allResources == undefined || allResources.length == 0){
    return [];
  }
  return allResources;
}

// @ts-ignore
export default function NaviBar({}){
  const resources = useContext(ResourceContext);
  let navs:Res[] = loadNavs(resources)
  let pathname = usePathname();
  return <Flex style={navigateBarStyle} align={"end"}>
      {(navs.map((n:Res) => {
        return (
          <div style={navDivStyle} key={n.id} onClick={() => {}} >
            <Link href={n.route == undefined ? '' : n.route} key={n.id} style={n.route != undefined && pathname.includes(n.route) ? selectedNavLinkStyle : navLinkStyle}>
              {n.name}
            </Link>
          </div>
        );
      }))}
    </Flex>;
}